<script lang="tsx" setup>
import '@/assets/styles/github-markdown.css'

import { useArticleToc, type MenuTree } from '@/composables/useArticleToc'

const { menuTree } = useArticleToc()

const MenuNav = ({ menuTrees }: { menuTrees: MenuTree[] }) =>
  menuTrees.map(({ href, title, children }) => (
    <a-anchor-link
      key={title}
      href={href}
      title={title}
      v-slots={{ sublist: children.length ? () => MenuNav({ menuTrees: children }) : undefined }}
    />
  ))
</script>

<template>
  <div>
    <slot name="header" />
    <div class="grid cols-1 md:cols-[1fr_200px] gap-xs">
      <div>
        <slot name="markdown-header" />
        <article class="rounded pa-xs bg-arco-2">
          <slot name="article-header" />
          <slot />
          <slot name="article-footer" />
        </article>
        <slot name="markdown-footer" />
        <a-back-top
          target-container=".arco-layout-content"
          class="opacity-80 transition-opacity hover:opacity-100"
          :style="{ position: 'absolute', margin: '16px' }"
        >
          <a-button
            title="返回顶部"
            shape="circle"
            type="dashed"
            class="shadow-lg !bg-arco-5 !border-arco-2 pa-0"
          >
            <i class="i-fluent-chevron-up-24-filled text-lg" />
          </a-button>
        </a-back-top>
      </div>
      <aside class="relative">
        <a-anchor
          class="bg-[rgba(var(--gray-1),0.1)] !fixed !w-200px"
          scroll-container=".arco-layout-content"
        >
          <MenuNav :menuTrees="menuTree" />
        </a-anchor>
      </aside>
    </div>
    <slot name="footer" />
  </div>
</template>
